<template>
  <div class="box">
    <div class="error_img"></div>
    <p class="error_text" v-text="message"></p>
  </div>
</template>
<script>
  import $ from 'jquery'

  // 引入图片路径
  import noShare from '../../assets/images/nodata/no_share.png'
  import noImage from '../../assets/images/nodata/no_image.png'
  import noVideo from '../../assets/images/nodata/no_video.png'
  import noDocs from '../../assets/images/nodata/no_docs.png'
  import noMusic from '../../assets/images/nodata/no_music.png'

  export default {
    data () {
      return {
        imgArr: [
          {url: 'url(' + noShare + ')'},
          {url: 'url(' + noImage + ')'},
          {url: 'url(' + noVideo + ')'},
          {url: 'url(' + noDocs + ')'},
          {url: 'url(' + noMusic + ')'}
        ]
      }
    },
    props: ['category', 'message'],
    mounted () {
      $('.error_img').css({backgroundImage: this.imgArr[this.category].url})
    }
  }
</script>
<style scoped>
  .box .error_img {
    width: 2.54rem;
    height: 2.16rem;
    background-size: 100% 100%;
    margin: 2.64rem auto 0.36rem;
  }

  .box .error_text {
    font-size: 0.32rem;
    color: #666;
    text-align: center;
  }
</style>
